<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <!-- BEGIN 全局样式 -->
    <link rel="stylesheet" href="../../../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="../../../lib/bootstrapvalidator/dist/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="../../../lib/jedate/skin/jedate-blue.css">
    <link rel="stylesheet" href="../../../css/reset-diy.css" type="text/css">
    <title>信息查询</title>
    <style>
        .help-block {
            text-align: left;
        }
    </style>
</head>
<body>
<div class="container-fluid pt-20">

    <div class="row mb-30 text-right">
        <form id="form-search">
            <div class="col-md-3 col-sm-3">
                <div class="form-group">
                    <input id="dateStart" class="form-control" type="text" readonly placeholder="开始时间" name="beginYear">
                </div>
            </div>
            <div class="col-md-3 col-sm-3">
                <div class="form-group">
                    <input id="dateEnd" class="form-control" type="text" readonly placeholder="结束时间" name="endYear">
                </div>
            </div>
            <div class="col-md-2 col-sm-2">
                <div class="form-group">
                    <input type="text" class="people form-control" autocomplete="off" placeholder="姓名,工号"
                           name="peopleName">
                </div>
            </div>


            <div class="col-md-2 col-sm-2">
                <select id="status" class="form-control" style="display: inline-block">
                    <option value="4">全部状态</option>
                    <option value="0">迟到</option>
                    <option value="1">早退</option>
                    <option value="2">旷工</option>
                </select>
            </div>
            <span class="btn-search btn btn-success ml-10 mr-15"><span
                    class="glyphicon glyphicon-search"></span> 查询</span>
        </form>

    </div>
    <!--<div class="text-right mt-25 mb-5 f-16">总共 <span class="total-num">0</span> 条</div>-->
    <table id="table-warning" class="table table-bordered table-striped table-hover text-center">
        <thead>
        <tr class="text-c">
            <!--<th>序号</th>-->
            <th>姓名</th>
            <th>工号</th>
            <th>课组</th>
            <th>状态</th>
            <th>时间</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div id="dataVessel" style='margin-top:30px;text-align:center;width:100%;font-size:18px;'></div>
    <div id="paging-bar" style="text-align:center;margin-top: 15px;"></div>

</div>

<!--核心脚本sss-->
<script src="../../../lib/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
<script src="../../../js/excanvas.min.js"></script>
<script src="../../../js/respond.min.js"></script>
<![endif]-->
<!--加密插件sss 必须放在jquery.myPlugIn_v1.0.js前面-->
<script src="../../../js/common/jsrsasign-all-min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/crypto-js.min.js" type="text/javascript" charset="utf-8"></script>
<!--加密插件eee-->

<script src="../../../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../../lib/bootstrapvalidator/dist/js/bootstrapValidator.min.js"></script>
<script src="../../../lib/jedate/dist/jedate.min.js"></script>
<script src="../../../lib/layer/2.4/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../lib/laypage/1.2/laypage.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/work-box.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/jquery.myPlugIn_v1.0.js" type="text/javascript" charset="utf-8"></script>
<script>
    var T = new Extend_base();
    jQuery(document).ready(function () {
        function Warning() {
            this.clickEvent();
            this.validatorRule();
        }

        Warning.prototype = {
            start: {},
            end: {},
            status: 4, // 迟到和全部的数据格式不一样,作为区分标志
            dataVessel: $("#dataVessel"),
            clickEvent: function () {
                var _this = this;
                var start = {}, end = {};
                jeDate('#dateStart', {
                    format: 'YYYY-MM-DD',
                    minDate: '2018-08-01', //设定最小日期为当前日期
                    maxDate: jeDate.nowDate(),
                    //设定最大日期为当前日期
                    donefun: function (obj) {
                        end.minDate = obj.val; //开始日选好后，重置结束日的最小日期
                        jeDate("#dateEnd", LinkageEndDate(false));
                    }
                });
                jeDate('#dateEnd', LinkageEndDate);

                function LinkageEndDate(istg) {
                    return {
                        trigger: istg || "click",
                        format: 'YYYY-MM-DD',
                        minDate: function (that) {
                            //that 指向实例对象
                            var nowMinDate = jeDate.valText('#dateStart') == "" && jeDate.valText(that.valCell) == "";
                            return nowMinDate ? jeDate.nowDate({DD: 0}) : end.minDate;
                        },
                        maxDate: jeDate.nowDate(), //设定最大日期为当前日期
                        donefun: function (obj) {
                            start.maxDate = obj.val; //将结束日的初始值设定为开始日的最大日期
                        }
                    };
                }

                $(".btn-search").on("click", function () {
                    _this.verify();
                });
                $("#dateEnd").on("click", function () {
                    if ($("#dateStart").val() == "") {
                        console.log("yes");
                        layer.alert("请先选择开始日期", {icon: 7});
                        return false;
                    }
                });

                $(".people").on('keydown keyup', function (e) {
                    if (e.keyCode == 13) {
                        e.preventDefault();
                    }
                });
                $(document).on('keyup', function (e) {
                    if (e.keyCode == 13) {
                        _this.verify();
                        e.preventDefault();
                    }
                });
            },
            verify: function () {
                var _this = this;
                var start = $("#dateStart");
                var end = $("#dateEnd");

                var people = $(".people");
                if (start.val() == "") {
                    layer.msg("开始时间不能为空!", {icon: 7});
                    return false;
                }

                //获取表单对象
                var form = $("#form-search");
                var bootstrapValidator = form.data('bootstrapValidator');

                //手动触发验证
                bootstrapValidator.validate();
                if (bootstrapValidator.isValid()) {
                    _this.status = $("#status").val();
                    //表单提交的方法、比如ajax提交
                    _this.search(start.val(), end.val(), people.val(), $("#status").val());
                }
            },
            search: function (start, end, keyword, status) {
                var _this = this;
                _this.dataVessel.text("正在获取数据...");

                var url, param, method;
                url = url_join("statistics/search");
                method = "post";
                param = {
                    start: start,
                    end: end,
                    keyword: keyword,
                    status: status,
                    limit: 10,
                };

                T.ajaxPaging(url, method, param, function (res) {
                    var data = typeof res == "object" ? res.data : {};

                    if (data.items.length > 0) {
                        _this.render(data);
                        _this.dataVessel.text("");

                        T.pagingAll(
                            {
                                bar: 'paging-bar',
                                sum: data.total_pages,
                                callback: function (obj) {
                                    param.page = obj.curr;
                                    T.ajaxSecret(url, method, param, function (res) {
                                        var data = res.data;
                                        _this.dataVessel.text("");
                                        if (data.items.length > 0) {
                                            _this.render(data);
                                        } else if (data.items.length == 0) {
                                            $("#table-warning").find("tbody").html("");
                                            _this.dataVessel.text("没有找到相关数据..");
                                        }
                                    });
                                },
                            }
                        );
                    } else if (data.items.length == 0) {
                        $("#paging-bar").hide();
                        $("#table-warning").find("tbody").html("");
                        _this.dataVessel.text("没有找到相关数据..");
                    }
                });
            },
            render: function (obj) {
                var _this = this;
                var data = obj.items;
                var table = $("#table-warning");
                table.find("tbody").html("");
                $(".total-num").text(obj.total_items);

                $.each(data, function (k, n) {
                    // 全部状态
                    if (_this.status == 4) {
                        var text = _this.countAll(n);
                        $.each(text, function (i, v) {

                            var tr = $("<tr>" +
                                // "<td>" + (obj.limit * (obj.current - 1) + 1 + i) + "</td>" +
                                "<td>" + n.username + "</td>" +
                                "<td>" + n.no + "</td>" +
                                "<td>" + (v.group_names || "无") + "</td>" +
                                "<td>" + v.status + "</td>" +
                                "<td>" + v.time + "</td>" +
                                "</tr>");
                            table.find("tbody").append(tr);
                        });
                    } else {
                        // 其他3个状态
                        var obj = _this.count012(n);
                        var tr = $("<tr>" +
                            // "<td>" + (obj.limit * (obj.current - 1) + 1 + i) + "</td>" +
                            "<td>" + n.username + "</td>" +
                            "<td>" + n.no + "</td>" +
                            "<td>" + (n.group_names || "无") + "</td>" +
                            "<td>" + obj.status + "</td>" +
                            "<td>" + obj.time + "</td>" +
                            "</tr>");
                        table.find("tbody").append(tr);
                    }
                });
            },
            count012: function (n) {
                // status 0,1,2
                var obj = {};
                if (this.status == 0) {
                    obj.status = "迟到";
                    obj.time = n.work_at;
                } else if (this.status == 1) {
                    obj.status = "早退";
                    obj.time = n.leave_at;
                } else {
                    obj.status = "旷工";
                    obj.time = n.today;
                }
                return obj;
            },
            countAll: function (obj) {
                // all status
                var text = [];
                if (obj.work_status == 1) {
                    text.push({
                        status: "迟到",
                        time: obj.work_at
                    });

                }
                if (obj.leave_status == 1) {
                    text.push({
                        status: "早退",
                        time: obj.leave_at
                    });
                }
                if (obj.leave_status == 2) {
                    var time = T.timeStriping(obj.today);
                    text.push({
                        status: "旷工",
                        time: time + "<span> -- : -- : --</span>"
                    });
                }
                return text;
            },
            validatorRule: function () {
                $("#form-search").bootstrapValidator({
                    message: "This value is not valid !",
                    live: "disabled",
                    feedbackIcons: {
                        valid: "glyphicon glyphicon-ok",
                        invalid: "glyphicon glyphicon-remove",
                        validating: "glyphicon glyphicon-refresh"
                    },
                    fields: {
                        peopleName: {
                            validators: {
                                notEmpty: {
                                    message: "姓名或工号不能为空"
                                },
                                stringLength: {
                                    min: "1",
                                    max: "18",
                                    message: "长度为1-18个字符"
                                }
                            }
                        },
                        // beginYear: {
                        //     validators: {
                        //         integer: {},
                        //         callback: {
                        //             message: '开始日期不能大于结束日期',
                        //             callback: function (value, validator, $field, options) {
                        //                 var begin = $('#pro_info').find("input[name='endYear']").val();
                        //                 return parseInt(value) <= parseInt(begin);
                        //             }
                        //         }
                        //     }
                        // },
                        // endYear: {
                        //     validators: {
                        //         integer: {},
                        //         callback: {
                        //             message: '结束日期不能小于开始日期',
                        //             callback: function (value, validator, $field) {
                        //                 var begin = $('#pro_info').find("input[name='beginYear']").val();
                        //                 $('#pro_info').find("input[name='beginYear']").keypress();
                        //                 validator.updateStatus('beginYear', 'VALID');
                        //                 return parseInt(value) >= parseInt(begin);
                        //             }
                        //         }
                        //     }
                        // }
                    }
                });
            },
        };
        new Warning();
    });
</script>
</body>
</html>